<template>
	<div class="home-page" :style="{backgroundImage:'url('+homebgImg+')'}">
		<img :src="homePle" class="home-ple" />
		<div class="home-cont page-cont-box">
			<div class="total-box">

				<span class="total-title" v-lang="{lang: controlSto.language, lgid: -14}">Search</span>
				<span class="total-num">{{dataObj.presTotal}}</span>
				<span class="total-desc" v-lang="{lang: controlSto.language, lgid: -18}">Prescription</span>
				<span class="total-sign">，</span>

				<span class="total-num">{{dataObj.herbTotal}}</span>
				<span class="total-desc" v-lang="{lang: controlSto.language, lgid: -19}">Herb</span>
				<span class="total-sign">，</span>

				<span class="total-num">{{dataObj.ingrTotal}}</span>
				<span class="total-desc" v-lang="{lang: controlSto.language, lgid: -20}">Ingredients</span>
				<span class="total-sign">，</span>

				
				<span class="total-num">{{dataObj.diseTotal}}</span>
				<span class="total-desc" v-lang="{lang: controlSto.language, lgid: -21}">Disease</span>

			</div>

			<div class="serach-box">
				<div class="ipt-box">
					<div class="home-item-box">
						<el-dropdown popper-class="home-item-drop-box" :hide-on-click="true" ref="dropdownHome">
							<span class="home-drop-txt">
								<span class="home-drop-title" :key="'bro_txt_' + controlSto.language" v-lang="{lang: controlSto.language, lgid: dataObj.searchType}"></span>
								<el-icon class="drop-arrow-img"><CaretBottom /></el-icon>
							</span>
							<template #dropdown >
								<el-dropdown-menu class="home-drop-cont" >
									<!-- searchList -->
									<el-dropdown-item class="drop-item" :class="{'drop-item-on': dataObj.searchType == item.id}" v-for="item in dataObj.searchList" :key="'homesearch_' + item.id"
									@click.stop="toType(item.fkey)">
									{{ langTxt(controlSto.language, item.fkey) }}
										<!-- <div class="drop-item-box" v-lang="{lang: controlSto.language, lgid: item.fkey}"></div> -->
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<div class="ipt-line"></div>
					<div class="ipt-cont ipt-home">
						 <el-input class="ipt-search" @keyup.enter="toSearch" v-model="dataObj.searchWork" autofocus :placeholder="dataObj.searchPlace" />
					</div>

				</div>
				<div class="search-btn-box">
					<div class="search-btn" v-lang="{lang: controlSto.language, lgid: -14}"
						@click.stop="toSearch"></div>
				</div>
			</div>

			<div class="cont-title" v-lang="{lang: controlSto.language, lgid: -40}">Capture the combinational landscape of TCM prescription by network inference</div>

			<div class="birf-box">
				<div class="birf-left">
					<div class="birf-txt" v-lang="{lang: controlSto.language, lgid: -41}" >TCM-Comb provides a combinational landscape for TCM prescription. 
						TCMs and Ingredients, by capturing the comprehensive relationships, including their herb-herb, ingredient-ingredient, herb-disease as well 
						 as ingredients-disease.</div>
					<div class="left-img-box">
						<el-image class="brif-img" :src="home1Img" fit="contain" />
					</div>
				</div>
				<div class="birf-right">
					<div class="right-img-box">
						<el-image class="brif-img" :src="home2Img" fit="contain" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
    import { ref, reactive, onBeforeMount } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
    import { getStatistics } from '@/service/tcm'

    import { controlStore } from '@/stores/control'
		import { langTxt } from '@/utils/util'

	import homebgImg from '@/assets/img/homebg.png'
	import homePle from '@/assets/img/homePeople.png'
	import home1Img from '@/assets/img/home1.png'
	import home2Img from '@/assets/img/home2.png'

    const controlSto = controlStore();
	const router = useRouter();
    const isLoading = ref(true);
		const dropdownHome = ref(null);
	const dataObj = reactive({
		// searchId: 1,
		searchType: -18,
		searchWork: '',
		searchPlace: 'Small bupleurl soup 小柴胡汤',
        searchList: [
            {
                id: 1,
				fkey: -18,
                name: '',
            }, {
                id: 2,
				fkey: -19,
                name: '',
            }, {
                id: 3,
                fkey: -20,
                name: '',
            }, {
                id: 4,
                fkey: -21,
                name: '',
            }
        ],
		// Prescription Herb   Ingredient  Disease
		presTotal: 0,
		herbTotal: 0,
		ingrTotal: 0,
		diseTotal: 0
    });

	onBeforeMount(()=> {
        getDataList();
    });

	const getDataList = () => {
        isLoading.value = true;
        getStatistics({}).then((res) => {
            isLoading.value = false;
           	if (res.success && res.data) {
				dataObj.presTotal = res.data.prescriptions || 0;
				dataObj.herbTotal = res.data.herbs || 0;
				dataObj.ingrTotal = res.data.ingredients || 0;
				dataObj.diseTotal = res.data.diseases || 0;
            }
        }).catch(() => {
            isLoading.value = false;
        });
    };


	const toType = (t) => {
		console.log(dropdownHome.value)
		if(dataObj.searchType != t) {
			dataObj.searchType = t;
			dropdownHome.value.handleClose();
			console.log(dropdownHome.value)
		}
};
		const clickDropdown = (e) => {
			console.log(e)
		}
	const toSearch = () => {
		// 
		let ty = dataObj.searchType;
		let rname = '';
		switch (ty) {
			case -18:
				rname = 'searchpres';
				break;
			case -19:
				rname = 'searchherb';
				break;
			case -20:
				rname = 'searchingr';
				break;
			case -21:
				rname = 'searchdise';
				break;
		}
		if(rname) {
			router.push({ name: rname, query: {t: 1, wk: dataObj.searchWork}});
		}
    };


</script>

<style lang="scss" scoped>
	.home-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		text-align: center;
		background-size: 100% 100%;
		position: relative;
		.home-ple {
			position: absolute;
			bottom: 0;
			right: 0;
			// width: 100px;
			// height: 200px;
		}
		.home-cont {
			display: inline-block;
			// width: 1400px;
    		text-align: left;
		}
		.total-box {
			padding: 24px 0;
			font-size: 14px;
			.total-title, .total-num {
				display: inline-block;
				padding-right: 4px;
			}
		}
		.serach-box {
			display: flex;
			width: 100%;
			height: 50px;
			margin-bottom: 48px;
			justify-content: space-between;
			// border-radius: 4px;
           	// border: 1px solid #DDDDDD;
			.ipt-box {
				display: flex;
				// width: 1256px;
				width: calc(100% - 144px);
				height: 50px;
				border: 1px solid #DDDDDD;
				border-radius: 4px;
				background-color: #FFF;
				.home-item-box {
					width: 165px;
					height: 50px;
					// cursor: pointer;
					.home-drop-txt {
						position: relative;
						display: flex;
						width: 135px;
						padding: 0 10px 0 20px;
						justify-content: space-between;
						font-size: 14px;
						line-height: 50px;
						// border-right: 1px solid red;
						&:focus-visible {
							outline: none;
						}
						.home-drop-title {
							color: #967846;
						}
						.drop-arrow-img {
							position: relative;
							top: 15px;
							color: #999;
						}
					}
				}
				.ipt-line {
					position: relative;
					height: 20px;
					top: 15px;
					// padding-right: 4px;
					border-left: 1px solid #D8D8D8;
				}
				.ipt-cont {
					flex: 1;
					height: 100%;
					.ipt-search {
						height: 100%;
						// font-size: 16px;
						:deep() {
							.el-input__wrapper {
								box-shadow: none;
							}
						}
					}
				}
			}

			.search-btn-box {
				.search-btn {
					width: 120px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #FFFFFF;
					background-color: #BC9F77;
					border-radius: 4px;
					user-select: none;
					cursor: pointer;
					&:hover {
						background-color: #E6C896;
					}
					&:active {
						background-color: #967846;
					}
				}
			}

		}
		.cont-title {
			height: 33px;
			padding-bottom: 16px;
			font-size: 24px;
			font-weight: 900;
			line-height: 33px;
			color: #643902;
		}
		.birf-box {
			display: flex;
			padding-bottom: 64px;
			justify-content: space-between;
			.birf-left {
				.birf-txt {
					// width: 614px;
					width: 90%;
					font-size: 18px;
					font-weight: 600;
					color: #643902;
					line-height: 25px;
				}
				.left-img-box {
					padding-top: 45px;
					.brif-img {
						width: 85%;
						// height: 258px;
					}
				}
			}
			.birf-right {
				position: relative;
				top: 16px;
				.right-img-box {
					.brif-img {
						width: 90%;
						// width: 505px;
					}
				}
			}
		}


	}
</style>


<style lang="scss">
    .home-item-drop-box {
        .home-drop-cont {
            .drop-item {
                min-width: 150px;
                padding: 8px;
                text-align: center;
                font-size: 14px;
                font-weight: 300;
                color: #333;
                cursor: pointer;
								display: block;
								&:not(:last-child) {
									border-bottom: 1px solid #ddd;
								}
                &:hover {
                    color: #C7802D;
                    background-color: #FAFAFA;
                }

							&.drop-item-on {
								color: #C7802D;
							}

            }
        }
    }
    
</style>
